<!--
 * @Description: 
 * @Version: 1.0
 * @Author: AaroLi
 * @Date: 2024-08-14 15:28:15
 * @LastEditors: AaroLi
 * @LastEditTime: 2024-08-14 18:19:04
-->
<template>
  <div class="title">
    <h2>审批/备案项目数</h2>
  </div>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { getNumbers, getMoneyNumbers } from './helper/api';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const props = defineProps({
    ...basicProps,
    type: { type: String, default: '1' },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(() => {
    getList(props.type);
  });
  function getList(id) {
    getNumbers(id).then(res => {
      console.log('res', res);
      if (res.code == 200) {
        const xArray = res.data.indicatorList.map(item => item.xdata);
        const yArray = res.data.indicatorList.map(item => item.ydata);
        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xArray,
            // data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: 'solid',
                color: 'rgba(226,226,226,0.5)',
              },
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              type: 'value',
              max: 200,
              splitNumber: 8,
              axisTick: {
                show: false,
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
                },
              },
            },
          ],
          grid: { left: '1%', right: '1%', top: '2  %', bottom: '15%', containLabel: true },
          legend: {
            data: ['数量'], // 图例项名称
            orient: 'horizontal', // 图例布局方向
            left: 'center', // 图例位置
            bottom: '0%',
          },
          series: [
            {
              name: '数量',
              smooth: true,
              data: yArray,
              // data: [111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222, 11111, 4000, 2000, 500, 333, 222, 111],
              type: 'line',
              areaStyle: {},
              itemStyle: {
                color: '#5ab1ef',
              },
            },
          ],
        });
      } else {
        createMessage.error(res.msg);
      }
    });
  }
</script>
<style lang="less" scoped>
  .title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
</style>
